<template>
  <div id="loginRes" v-if="b">
        <div class="mask" @click="loginReg(false)">
        </div>
    <el-card class="logincard" shadow="always">
      <div class="loginResHeader">
          <span class="login" :class="isLogin?'active':''" @click="handleLoginRes(true)">登录</span>
          <span class="res" :class="isLogin?'':'active'" @click="handleLoginRes(false)">注册</span>
          <span></span>
          <span class="close el-icon-close" @click="loginReg(false)"></span>
      </div>
      <div class="accountPassword">
        <select name="" id="" v-model="reg.isCodeLogin">
          <option value="true" >短信登录</option>
          <option value="false">密码登录</option>
        </select>
          <input 
            type="text" 
            v-model="reg.phone"
            onkeyup="value=value.replace(/[^\d]/g,'')" 
            @change="handleTel(reg.phone)" 
            maxlength=11 placeholder="请输入手机号">
          <input 
            type="text" 
            placeholder="请输入验证码"
            v-model="reg.code"
            v-if="reg.isCodeLogin == 'true'"
            @blur="handleNull('验证码',reg.code)"
            key="code"
          >
          <input 
            type="password" 
            placeholder="请输入密码"
            v-model="reg.password"
            v-if="reg.isCodeLogin == 'false'"
            @change="handlePow(reg.password)"
            key="pwd"
            >
          <input 
            type="text"
            v-if="!isLogin" 
            v-model="reg.nickName"
            @blur="handleNull('昵称',reg.nickName)"
            maxlength=11 placeholder="请输入昵称">
          <input 
            type="text"
            v-if="!isLogin" 
            v-model="reg.realName"
            @blur="handleNull('真实姓名',reg.realName)"
            maxlength=11 placeholder="请输入真实姓名">
          <input 
            type="email"
            v-if="!isLogin" 
            v-model="reg.email"
            @blur="handleNull('邮箱',reg.email)"
            maxlength=11 placeholder="请输入邮箱">
      </div>
      <div>
        <button class="submitLogin" v-if="isLogin" @click="handleLogin()">登录</button>
        <button class="submitRes" v-else @click="handleReg()">注册</button>
      </div>
      <div class="agreement">登录即同意慕课网 <span>《隐私政策》</span></div>
    </el-card>
 
  </div>
</template>

<script>
import Vue from 'vue'
import {mapState,mapMutations} from 'vuex'
import {userLogin,userReg} from '../api/loginRegApi'
export default {
    computed: {
    ...mapState({
      b:state=>state.logReg[0].b,
    }),
    },
  data() {
    return {
      reg:{
        phone:'',
        password:'',
        code:'',
        nickName:'嗨哆嚒',
        realName:'张三',
        email:'807491390@qq.com',
        isCodeLogin:"true"
      },
      isLogin:true,
    }
  },
  methods: {

    ...mapMutations(['loginReg']),

    //注册登录切换
    handleLoginRes(bool){
      this.isLogin = bool;
      this.reg.phone = '';
      this.reg.password = ''
    },
    //账号密码验证
    //手机号验证
    handleTel(v){
      // console.log(v)
      var mobilevalid = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}$/;
      if (!mobilevalid.test(v)) {
        alert('请输入正确的手机号码！')
        this.reg.phone = ''
        return false;
        }
    },

    //密码验证
    handlePow(v){
      // var m = /^[a-zA-Z]\w{7,15}$/;
      // if(!m.test(v)){
      //   alert('密码必须以字母开头，长度在8~16之间，只能包含字母、数字和下划线)')
      //   this.reg.password = ''
      //   return false;
      // }
    },

    //非空判断
    handleNull(info,v){
      if (v.replace(/\s+/g,"") == '') {
        alert(`${info}不能为空`)
        return false;
        }
    },

    //请求登录
    async handleLogin(){
      console.log(this.reg)
      let res = await userLogin(`/login/?phone=${this.reg.phone}&password=${this.reg.password}&isCodeLogin=${this.reg.isCodeLogin}`)
      console.log(res)
      if(res.data.status === 200){
       
        // console.log(res.data.data.authToken)
        // 登录成功后将基本信息存入本地缓存
        let data = JSON.stringify(res.data.data)
        localStorage.setItem('data',data)
        
        //关闭
        this.loginReg(false)
      }

    },

    //请求注册
    async handleReg(){
      console.log(this.reg)

      for(let i in this.reg){
        if(this.reg[i] == ''){
          alert(`${i}不能为空`)
          return false;
        }
      }

      let res = await userReg('/back/user/addUser',this.reg)
      console.log(res)
    }

    
    }
}
</script>

<style>
@import url('../assets/css/loginRes.css');
</style>